<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/function.css">
    <script src="/js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" class="g_container">
        <div>
            <button v-on:click="openAddFriend()">添加好友</button>
        </div>
        <div>
            <div>
                <div>好友列表</div>
                <div>
                    <div v-for="user in friendList">
                        <div>{{user.userName}}</div>
                    </div>
                </div>
            </div>
            <div>
                
            </div>
        </div>
        
        <div v-if="showAddFriend" class="addFriendModal">
            <div>
                <div>
                    <div>添加好友</div>
                    <div v-on:click="closeAddFriend()">关闭</div>
                </div>
                <div>
                    <div v-for="user in userList">
                        <div>{{user.userName}}</div>
                        <div v-on:click="addFriend(user)">添加</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        var app =new Vue({
            el: '#app',
            data: {
                showAddFriend: false,
                userList: [],
                friendList: [],
            },
            created: function() {
                this.initData();
            },
            methods: {
                initData: function() {
                    var _this = this;
                    $.ajax({
                        type: 'GET',
                        url: '/api/user/getFriendList',
                        data: {},
                        success: function(data) {
                            console.log('friendList::: ', data);
                            if(data.status === 'success') {
                                _this.friendList = data.data;
                            }
                        }, 
                        error: function(err) {
                            console.error('err:::', err);
                        }
                    })

                    $.ajax({
                        type: 'GET',
                        url: '/api/user/getUnFriend',
                        data: {},
                        success: function(data) {
                            console.log('data-getUnFriend-', data);
                            console.log('data--', data);
                            if(data.status === 'success') {
                                _this.userList = data.data;
                            }
                        },
                        error: function(err) {
                            console.error('err:getUnFriend::', err);
                        }
                    });
                },
                openAddFriend: function() {
                    this.showAddFriend = true;
                },
                
                closeAddFriend: function() {
                    this.showAddFriend = false;
                },

                addFriend: function(user) {
                    $.ajax({
                        type: 'POST',
                        url: '/api/user/addFriend',
                        data: {
                            friendId: user._id,
                            remarks: '好友'
                        },
                        success: function(data) {
                            console.log('data--', data);
                        },
                        error: function(err) {
                            console.error('err:::', err);
                        }

                    });
                }
            }
        });
        // 打开一个 web socket
        var ws = new WebSocket("ws://localhost:3000");
        
        ws.onopen = function() {
            // Web Socket 已连接上，使用 send() 方法发送数据
            var msg = JSON.stringify({
                type: 'join',
                userId: '12345',
                clientId: '123456'
            });

            // ws.send("发送数据");
            ws.send(msg);
            console.log("数据发送中...");
        };
            
        ws.onmessage = function (evt) { 
            var received_msg = evt.data;
            console.log("数据已接收...", received_msg);
        };

        ws.onerror = function(evt) {
            ws.send('onerror');
            console.log("onerror...", evt); 
        }
            
        ws.onclose = function(evt) { 
            ws.send('用户离开！');
            // 关闭 websocket
            alert("连接已关闭...", evt); 

            ws.close(); //关闭TCP连接
        };
        window.onbeforeunload= function() {
            var msg = {
                type: 'leave',
                userId: '123456',
                clientId: '123456'
            }
            ws.send(JSON.stringify(msg));
            alert('is close');
        }
    </script>
</body>
</html>